<template>
  <!-- 柱状图 -->
  <div
    ref="myChartsRef"
    :style="{ height: height, width: width }"
    class="echarts"
  ></div>
</template>
<script setup>
import { nextTick } from "vue"
import tupian from "@/assets/PersonnelMaterials/dianlegedian.png"
const emit = defineEmits(["click_Fun"])
const { appContext } = getCurrentInstance()
const { $echarts, fontSize } = appContext.config.globalProperties

const props = defineProps({
  width: {
    default: "100%",
    type: String
  },
  height: {
    default: "100%",
    type: String
  },
  lineChartList: {
    type: Object
  }
})

const myChartsRef = ref()

// 渲染echarts
const initEcharts = () => {
  let myChart = $echarts.getInstanceByDom(myChartsRef.value)
  if (myChart) {
    myChart.dispose()
  }
  myChart = $echarts.init(myChartsRef.value)

  let Tu = "image://url" + tupian
  // console.log(props.lineChartList.seriesObj)
  let series = []
  let legendData = []
  for (let key in props.lineChartList.seriesObj) {
    // console.log(key)
    legendData.push(key)
    series.push({
      name: key,
      type: "line",
      barWidth: fontSize(100),
      symbol: Tu,
      smooth: props.lineChartList.smooth ? props.lineChartList.smooth : false,
      areaStyle: {
        color: new $echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: props.lineChartList.colorList[key][1]
          },
          {
            offset: 1,
            color: props.lineChartList.colorList[key][0]
          }
        ])
      },
      itemStyle: {
        color: new $echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: props.lineChartList.colorList[key][1]
          },
          {
            offset: 1,
            color: props.lineChartList.colorList[key][0]
          }
        ]),
        normal: {
          color: new $echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: props.lineChartList.colorList[key][1]
            },
            {
              offset: 1,
              color: props.lineChartList.colorList[key][0]
            }
          ]),
          lineStyle: {
            color: new $echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: props.lineChartList.colorList[key][1]
              },
              {
                offset: 1,
                color: props.lineChartList.colorList[key][1]
              }
            ]),
            width: 2
          }
        }
      },
      label: {
        show: props.lineChartList.labelShow
          ? props.lineChartList.labelShow
          : false,
        position: "top",
        distance: -5,
        formatter: (params) => {
          // console.log(params)
          return `{z|}`
        },
        rich: {
          z: {
            lineHeight: 5,
            widht: fontSize(30),
            height: fontSize(30),
            backgroundColor: {
              image: tupian
            }
          }
        }
      },
      data: props.lineChartList.seriesObj[key]
    })
  }

  let option = {
    // title: {
    //   text: "", // 标题名称
    //   textStyle: {
    //     // 标题文字样式
    //     color: "#fff",
    //     fontSize: fontSize(12),
    //     fontWeight: 700
    //   }
    // },
    legend: {
      show: props.lineChartList.isShowlegend, //控制显示隐藏的
      type: "scroll",
      itemWidth: fontSize(25),
      itemHeight: fontSize(25),
      textStyle: {
        color: "#ffffff",
        fontSize: fontSize(25),
        fontWeight: 700
      },
      data: legendData
    },
    grid: props.lineChartList.grid,
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow"
      },
      backgroundColor: "rgba(0,0,0,.6)",
      borderColor: "rgba(147, 235, 248, 0)",
      textStyle: {
        color: "#FFF"
      }
    },
    xAxis: {
      data: props.lineChartList.xData,
      axisLine: {
        show: true, //是否隐藏X轴轴线
        lineStyle: {
          color: "rgba(60,132,163,0.4)",
          width: 2
        }
      },
      axisTick: {
        show: false, //是否隐藏X轴刻度
        alignWithLabel: true
      },
      axisLabel: {
        show: true,
        color: "#FFF", //X轴文字颜色
        fontSize: fontSize(40),
        interval: 0
      }
    },
    yAxis: [
      {
        name: props.lineChartList.danwei,
        nameTextStyle: {
          color: "#fff",
          fontSize: fontSize(40),
          padding: [0, 0, 0, 0] // 调整文字位置
        },
        type: "value",
        splitLine: {
          show: true,
          lineStyle: {
            color: "rgba(255, 255, 255, 0.15)",
            type: "dashed" // dotted 虚线
          }
        },
        axisTick: {
          show: false
        },
        axisLine: {
          show: false
        },
        axisLabel: {
          show: true,
          color: "#fff",
          fontSize: fontSize(40),
          // 去掉y轴千位逗号
          formatter: function (value) {
            return value + ""
          }
        }
      },
      {
        type: "value",
        splitLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLine: {
          show: false //隐藏X轴轴线
        },
        axisLabel: {
          show: false
        }
      }
    ],
    series: series
  }

  setTimeout(() => {
    myChart.resize()
  }, 1000)
  myChart.setOption(option)
}

onMounted(() => {
  console.log(props.lineChartList)

  nextTick(() => {
    initEcharts()
  })
  addEventListener("resize", () => {
    initEcharts()
  })
})

// watch(
//   () => props.option,
//   (val) => {
//     //// console.log(val);
//     nextTick(() => {
//       if (myChart.value) {
//         initEcharts()
//       }
//     })
//   },
//   {
//     deep: true
//   }
// )
</script>
<style scoped>
.echarts {
  width: 100%;
  height: 100%;
}
</style>
